<template>
	<view class="content-in">
		<view class="albums-box">
			<!-- <view class="albums-box-title">
				<text>太透</text>
				<text>{{list.title}}</text>
			</view> -->
			<view class="in-albums-box">
				<view class="album" v-for="(item,index) in list" :key="item.index">
					<!-- @click="previewImg('/static/fake/'+index+'.jpg')"> -->
					<!-- <image :src="'http://192.168.31.248:8080/api-attach/attachDownload?id='+item.attachId" mode="aspectFit"></image> -->
					<!-- <image :src="'http://192.168.31.248:8080/api-attach/attachDownload?id='+item.attachId" mode="aspectFill"></image> -->
					<!-- <image :src="'http://pm.gxtimeloit.com:10030/api-attach/attachDownload?id='+item.attachId+'&isOnline=1'" mode="aspectFit"></image> -->
					<image :src="'/static/image/fake/'+index+'.jpg'" mode="aspectFill" @tap="previewImg('/static/image/fake/'+index+'.jpg')"></image>
					<!-- <view class="album-text">
						<text>{{item.attachName}}</text>
					</view> -->
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				photo: [],
				bf_options: [],
			}
		},
		onLoad(options) {
			// console.log('options',options.title)
			this.bf_options.id = options.id
			this.bf_options.title = options.title
			this.getAlbumInfo();
		},
		methods: {
			// async getAlbumInfo() {
			// 	const res = await this
			// 		.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
			// 			url: '/api-attach/attachs?onwerId=' + this.bf_options.id +
			// 				'&ownerType=com.operate.entity.PhotoAlbum',
			// 			method: "get",
			// 		})
			// 	console.log("res-info", res)
			// 	this.photo = res.body.list
			// },
			// // 预览图片单张
			// previewImg(logourl) {
			// 	let _this = this;
			// 	let imgsArray = [];
			// 	imgsArray[0] = logourl
			// 	uni.previewImage({
			// 		current: 0,
			// 		urls: imgsArray
			// 	});
			// },
		},
	}
</script>

<style>
	.content-in {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.albums-box {
		width: 95%;
	}

	.albums-box-title {
		height: 100rpx;
		position: relative;
		font-size: 44rpx;
		margin-bottom: 30rpx;
	}

	.albums-box-title::after {
		content: "";
		background-color: #E17564;
		width: 100%;
		height: 4rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.album {

		width: 216rpx;
		height: 216rpx;

		font-size: 28rpx;
		margin-bottom: 20rpx;

		overflow: hidden;
		display: flex;
		align-items: center;
		flex-direction: column;
		/* border: #007AFF solid 1px; */
		border-radius: 15rpx;
		box-shadow: #959595 0rpx 3rpx 3rpx;
		/* margin-right: 20rpx; */
	}

	image {
		width: 216rpx;
		height: 216rpx;
		/* border-radius: 15rpx; */
		box-shadow: #959595 0rpx 3rpx 3rpx;
	}

	.album-text {

		display: flex;
		justify-content: space-between;
	}

	.in-albums-box {

		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
</style>
